import { ProTable } from '@ant-design/pro-components';
import { Button, Tag, Tooltip, Rate, Select } from 'antd';
import React, { useRef } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
  ProFormGroup,
  ProFormList,
  ProFormDependency,
} from '@ant-design/pro-components';
import moment from 'moment';
import { useRequest } from 'umi';
import type { ProFormInstance } from '@ant-design/pro-components';

const { Option } = Select;

export default () => {
  const editPlanRef = useRef<ProFormInstance>();
  //导师端——获取自己学生的计划列表
  const getUnderLearnPlan = useRequest((data = {}) => {
    let url = '';
    let count = 0;
    Object.keys(data).map((value: any, index: any) => {
      // console.log(value);
      let key_temp = value;
      let value_temp = data[value];
      if (data[value]) {
        if (count == 0) {
          url = url + '?' + key_temp + '=' + value_temp;
        } else {
          url = url + '&' + key_temp + '=' + value_temp;
        }
        count++;
      }
    });
    return {
      url: `http://10.1.40.84:9998/stuTrain/getUnderLearnPlan` + url,
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
    };
  });
  //学生端——查看我的一个计划详细内容
  const getMyOnePlan = useRequest(
    (id = null) => {
      return {
        url: `http://10.1.40.84:9998/stuTrain/getMyOnePlan?id=${id}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
    },
  );

  const columns = [
    {
      title: '学习计划名称',
      dataIndex: 'planName',
      key: 'planName',
      hideInSearch: true,
      copyable: true,
      ellipsis: true,
      // render: (_: any) => <a>{_}</a>,
    },
    {
      title: '上传学生',
      dataIndex: 'stuName',
      key: 'stuName',
    },
    {
      title: '所属阶段',
      dataIndex: 'stageName',
      key: 'stageName',
      renderFormItem: () => {
        return (
          <Select
            showSearch
            filterOption={(input, option) =>
              (option!.children as unknown as string)
                .toLowerCase()
                .includes(input.toLowerCase())
            }
          >
            <Option value={'文献阅读'}>文献阅读 </Option>
            <Option value={'选题阶段'}>选题阶段 </Option>
            <Option value={'中期阶段'}>中期阶段 </Option>
            <Option value={'预答辩阶段'}>预答辩阶段 </Option>
            <Option value={'毕业答辩阶段'}>毕业答辩阶段 </Option>
          </Select>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'planState',
      key: 'planState',
      hideInSearch: true,
      render: (text: any) => {
        if (text === '已完成') {
          return <Tag color={'blue'}>{text}</Tag>;
        } else {
          return <Tag color={'gold'}>{text}</Tag>;
        }
      },
    },

    {
      title: '研究方向',
      dataIndex: 'resDirection',
      key: 'resDirection',
      hideInSearch: true,
    },
    {
      title: '开始时间',
      key: 'startTime',
      dataIndex: 'startTime',
      hideInSearch: true,
      render: (text: any) => moment(text).format('YYYY-MM-DD'),
    },
    {
      title: '结束时间',
      key: 'endTime',
      dataIndex: 'endTime',
      hideInSearch: true,
      render: (text: any) => moment(text).format('YYYY-MM-DD'),
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      render: (text: any, record: any) => [
        <ModalForm
          key="1"
          title="查看计划"
          trigger={
            <Button
              size="small"
              type="link"
              onClick={() => {
                getMyOnePlan.run(record.id).then((e) => {
                  editPlanRef.current?.setFieldsValue(e[0]);
                });
              }}
            >
              查看计划
            </Button>
          }
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
            destroyOnClose: true,
          }}
          submitTimeout={2000}
          formRef={editPlanRef}
          submitter={{
            render: () => null,
          }}
        >
          <ProForm.Group>
            <ProFormText
              width="md"
              name="id"
              hidden
              disabled={record.planState === '已完成'}
            />
            <ProFormText
              width="md"
              name="planName"
              label="计划名称"
              required
              disabled={record.planState === '已完成'}
            />
            <ProFormText
              width="md"
              name="planDesc"
              label="计划描述"
              required
              disabled={record.planState === '已完成'}
            />
            <ProFormDatePicker
              width="sm"
              name="startTime"
              label="计划开始时间"
              required
              disabled={record.planState === '已完成'}
            />
            <ProFormDatePicker
              width="sm"
              name="endTime"
              label="计划终止时间"
              required
              disabled={record.planState === '已完成'}
            />
            <ProFormSelect
              label="材料共享"
              name="isShareable"
              width="xs"
              valueEnum={{
                '1': '共享',
                '0': '不共享',
              }}
              required
              disabled={record.planState === '已完成'}
            />
          </ProForm.Group>
          <ProFormList
            name="materialList"
            label="材料信息"
            rules={[
              {
                validator: async (_, value) => {
                  // console.log(value);
                  if (value && value.length > 0) {
                    return;
                  }
                  throw new Error('至少要有一项！');
                },
              },
            ]}
            creatorButtonProps={{
              creatorButtonText: '添加材料',
              hidden: record.planState === '已完成',
            }}
            copyIconProps={
              record.planState === '已完成' ? false : { tooltipText: '复制' }
            }
            deleteIconProps={
              record.planState === '已完成' ? false : { tooltipText: '删除' }
            }
          >
            {(meta: any, index: any, action: any, count: any) => {
              return (
                <ProFormGroup key="group">
                  <ProFormText
                    width="sm"
                    required
                    name="materialName"
                    label="材料名称"
                    disabled={record.planState === '已完成'}
                  />
                  <ProFormSelect
                    label="材料类型"
                    name="materialType"
                    width="xs"
                    required
                    valueEnum={{
                      学习报告: '学习报告',
                      参考文献: '参考文献',
                    }}
                    disabled={record.planState === '已完成'}
                  />
                  <ProFormDependency name={['materialType']}>
                    {({ materialType }) => {
                      if (materialType === '参考文献') {
                        return (
                          <ProFormText
                            width="sm"
                            name="materialContent"
                            label="文献链接"
                            required
                            // disabled={record.planState === "已完成"}
                          />
                        );
                      } else if (
                        materialType === '学习报告' ||
                        materialType === '阶段性报告'
                      ) {
                        return (
                          <ProFormText
                            width="sm"
                            name="materialContent"
                            required
                            hidden
                            disabled={record.planState === '已完成'}
                          />
                        );
                      } else {
                        return null;
                      }
                    }}
                  </ProFormDependency>
                  <ProFormDependency name={['materialType']}>
                    {({ materialType }) => {
                      if (
                        materialType === '学习报告' &&
                        action.getCurrentRowData().materialContent
                      ) {
                        return (
                          <Button
                            type={'link'}
                            style={
                              index === 0 ? { marginTop: 30 } : { marginTop: 0 }
                            }
                            onClick={() => {
                              window.open(
                                action.getCurrentRowData().materialContent,
                              );
                            }}
                            // disabled={record.planState === "已完成"}
                          >
                            下载
                          </Button>
                        );
                      } else {
                        return null;
                      }
                    }}
                  </ProFormDependency>
                </ProFormGroup>
              );
            }}
          </ProFormList>
        </ModalForm>,
      ],
    },
  ];

  return (
    <ProTable
      columns={columns}
      dataSource={getUnderLearnPlan?.data}
      rowKey="id"
      pagination={{
        showQuickJumper: true,
      }}
      dateFormatter="string"
      headerTitle="学习计划列表"
      options={false}
      onSubmit={(e) => getUnderLearnPlan.run(e)}
      onReset={() => getUnderLearnPlan.run()}
    />
  );
};
